<template>
  <div class="container" :style="containerStyle">
    <navbar title="收入明细" theme="light" :leftHidden="!back" :rightHidden="!back"></navbar>
    <div class="filterbar">
      <text @click="selectStatus" :class="['filterbar-item', searchParam.status === '' && 'filterbar-item-current']"
            status="">有效订单</text>
      <text @click="selectStatus" :class="['filterbar-item', searchParam.status === 'PAID' && 'filterbar-item-current']"
            status="PAID">已付款</text>
      <text @click="selectStatus"
            :class="['filterbar-item', searchParam.status === 'WAIT_SETTLE' && 'filterbar-item-current']"
            status="WAIT_SETTLE">待结算</text>
      <text @click="selectStatus"
            :class="['filterbar-item', searchParam.status === 'SETTLED' && 'filterbar-item-current']" status="SETTLED">已结算</text>
      <text @click="selectStatus"
            :class="['filterbar-item', searchParam.status === 'INVALID' && 'filterbar-item-current']" status="INVALID">已失效</text>
    </div>
    <list
        class="order-list-container"
        @scroll="onPageScroll">
      <page-refresh v-on:refresh="onXRefresh" v-on:pullingDown="onPullingDown" :refreshing="refreshing"
                    :indicatorScale="indicatorScale"></page-refresh>
      <cell v-for="order in userCommissionOrderList" v-bind:key="order.id">
        <div class="order" @click="orderClick(order.commissionItemId)">
          <div class="order-item">
            <image :src="order.itemPicUrl" class="order-item-pic" resize="cover"></image>
            <div class="order-item-detail">
              <div class="order-item-title">
                <text class="order-item-title-label">{{order.ecomPlatTitle}}</text>
                <text class="order-item-title-text">{{order.itemTitle}}</text>
              </div>
              <text class="order-item-shop-title">所属店铺：{{order.shopTitle}}</text>
              <div class="order-item-tags">
                <wxc-tag type="solid"
                         class="order-item-tag"
                         :tag-color="statusTagColor(order.status)"
                         font-color="#ffffff"
                         :value="order.statusTitle"></wxc-tag>
                <wxc-tag type="solid"
                         v-if="iosShow"
                         class="order-item-tag"
                         :tag-color="allotTypeTagColor(order.allotType)"
                         font-color="#ffffff"
                         :value="order.allotTypeTitle"></wxc-tag>
              </div>
            </div>
          </div>
          <div class="order-commission">
            <div class="order-commission-cell">
              <text class="order-commission-title">付款金额</text>
              <div class="order-commission-text">
                <wxc-rich-text
                    :config-list="[{type: 'text', value: '¥', style: yStyle}, {type: 'text', value: order.payFee.toFixed(2), style: valueStyle}]"></wxc-rich-text>
              </div>
            </div>
            <div class="order-commission-cell" v-if="order.status == 'PAID' || order.status == 'WAIT_PAY' || order.status == 'WAIT_SETTLE'">
              <text class="order-commission-title">预估佣金</text>
              <div class="order-commission-text flex-row">
                <wxc-rich-text
                    :config-list="[{type: 'text', value: '¥', style: yStyle}, {type: 'text', value: (order.estimateCommissionFee).toFixed(2), style: valueStyle}]"></wxc-rich-text>
              </div>
            </div>
            <div class="order-commission-cell" v-if="order.status == 'SETTLED'">
              <text class="order-commission-title">结算佣金</text>
              <div class="order-commission-text flex-row">
                <wxc-rich-text
                    :config-list="[{type: 'text', value: '¥', style: yStyle}, {type: 'text', value: order.settledCommissionFee.toFixed(2), style: valueStyle}]"></wxc-rich-text>
              </div>
            </div>
            <div class="order-commission-cell"
                 v-if="order.status == 'PAID' || order.status == 'WAIT_PAY' || order.status == 'WAIT_SETTLE'">
              <text class="order-commission-title">预估奖励</text>
              <div class="order-commission-text">
                <wxc-rich-text
                    :config-list="[{type: 'text', value: '¥', style: yStyle}, {type: 'text', value: order.estimateRewardFee, style: valueStyle}]"></wxc-rich-text>
              </div>
            </div>
            <div class="order-commission-cell" v-if="order.status == 'SETTLED'">
              <text class="order-commission-title">结算奖励</text>
              <div class="order-commission-text">
                <wxc-rich-text
                    :config-list="[{type: 'text', value: '¥', style: yStyle}, {type: 'text', value: order.settledRewardFee, style: valueStyle}]"></wxc-rich-text>
              </div>
            </div>
            <div class="order-commission-cell" v-if="order.status == 'SETTLED'">
              <text class="order-commission-title">结算收入</text>
              <div class="order-commission-text">
                <wxc-rich-text
                    :config-list="[{type: 'text', value: '¥', style: yStyle}, {type: 'text', value: order.settledFee, style: valueStyle}]"></wxc-rich-text>
              </div>
            </div>
          </div>
          <div class="order-footer">
            <text class="order-create-time">{{order.status  !==  'SETTLED' ? order.createTime + ' 创建' : order.settledTime + ' 结算'}}</text>
            <text class="user-upgrade-btn" v-if="false && iosShow && order.estimateCommissionFee == 0" @click="openUserUpgrade">升级赚钱</text>
          </div>
        </div>
      </cell>
      <cell>
        <page-notice msg="抱歉，什么都木有找到～" v-if="!userCommissionOrderList.length && !hasNext"></page-notice>
      </cell>
      <page-loading-more v-on:loadingMore="onLoadingMore" :loadingMore="loadingMore"
                         :shown="hasNext"></page-loading-more>
    </list>
    <page-scrolltop :shown="pageScrollTopShown" @click="gotoTop"></page-scrolltop>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/utilities";
  @import "./sass/icon";

  .container {
    background-color: $body-bg;
    transition: transform .3s linear
  }

  .filterbar {
    flex-direction: row;
    justify-content: space-between;
    &-item {
      flex: 1;
      background-color: #ffffff;
      height: 80px;
      line-height: 80px;
      color: $color;
      font-size: 28px;
      text-align: center;
      @include border-bottom(1, solid, #ddd);
      &-current {
        color: $color-primary;
        @include border-bottom(2, solid, $brand-primary);
      }
    }
    margin-bottom: 10px;
  }

  .user-upgrade-btn {
    font-size: 26px;
    color: $color-warning;
  }

  .order {
    margin-bottom: 10px;
    background-color: #ffffff;
    padding: 30px 30px 20px 30px;
    &-item {
      flex-direction: row;
      &-pic {
        width: 126px;
        height: 126px;
        @include border(1, solid, #ddd);
      }
      &-detail {
        flex: 1;
        padding-left: 20px;
        justify-content: flex-start;
        align-items: flex-start;
      }
      &-title {
        flex-direction: row;
        &-label {
          font-size: 20px;
          line-height: 28px;
          padding: 0 5px;
          background-color: $color-warning;
          color: #ffffff;
          border-radius: 5px;
          margin-right: 5px;
        }
        &-text {
          font-size: 24px;
          line-height: 28px;
          color: $color;
          margin-bottom: 5px;
          text-overflow: ellipsis;
          lines: 2;
          flex: 1;
          overflow: hidden;
        }
      }
      &-shop-title {
        font-size: 24px;
        color: $color-muted;
        margin-bottom: 5px;
      }
      &-tags {
        flex-direction: row;
      }
      &-tag {
        margin-right: 10px;
      }
    }
    &-create-time {
      color: $color-muted;
      font-size: 24px;
    }
    &-footer {
      justify-content: space-between;
      flex-direction: row;
    }
  }

  .order-commission {
    flex-direction: row;
    justify-content: center;
    padding: 20px 0 10px 0;
    &-cell {
      flex: 1;
    }
    &-title {
      color: $color-muted;
      font-size: 24px;
    }
    &-text {
      padding: 10px 5;
    }
  }
</style>
<script>
import {WxcRichText, WxcTag} from 'weex-ui'
let api = require('./include/api')
let Deferred = require('Deferred')
let navigator = require('./include/xnavigator')
let modal = weex.requireModule('modal')
let theme = require('./include/theme')
require('./include/page-xdom')
let config = require('./include/app-config')
const DEFAULT_SEARCH_PARAM = {
  page: 1,
  status: '',
  pageSize: 10
}
module.exports = {
  mixins: [
    require('./mixin/page-refresh'),
    require('./mixin/page-loading-more'),
    require('./mixin/page-scrolltop')
  ],
  components: {
    'page-notice': require('./components/page-notice.vue'),
    'navbar': require('./components/navbar.vue'),
    WxcTag,
    WxcRichText
  },
  props: {
    height: {default: 0},
    back: {default: true}
  },
  data () {
    return {
      loaded: false,
      userCommissionOrderList: [],
      refreshing: false,
      refreshIndicatorScale: 0.2,
      hasNext: true,
      searchParam: Object.assign({}, DEFAULT_SEARCH_PARAM),
      loading: false,
      containerStyle: {},
      iosShow: false,
      yStyle: {
        fontSize: 20,
        color: theme.color
      },
      valueStyle: {
        fontSize: 32,
        color: theme.color
      }
    }
  },
  created () {
    config.bindConfig(this)
    if (this.height) {
      this.containerStyle.height = this.height
    }
    Deferred.when(this.loadData(), this.search()).always(() => {
      this.loaded = true
    })
  },
  methods: {
    loadData () {

    },
    openUserUpgrade () {
      navigator.push('upgrade-user-level.js')
    },
    allotTypeTagColor (type) {
      switch (type) {
        case 'DIRECT':
          return '#fb4748'
        case 'INDIRECT':
          return '#5eb1de'
        case 'AGENT':
          return '#e39334'
      }
    },
    statusTagColor (type) {
      // order.status == 'SETTLED' ? '#5cb85c' : (order.status == 'INVALID') ? '#b1b1b1' : '#5eb1de'
      switch (type) {
        case 'SETTLED':
          return '#5cb85c'
        case 'WAIT_SETTLE':
          return '#e39334'
        case 'INVALID':
          return '#b1b1b1'
        default:
          return '#5eb1de'
      }
    },
    orderClick (commissionItemId) {
      if (commissionItemId) {
        navigator.push('commission-item.js?id=' + commissionItemId)
      }
    },
    resetSearchParam () {
      Object.assign(this.searchParam, DEFAULT_SEARCH_PARAM)
      this.hasNext = true
    },
    selectStatus (e) {
      this.resetSearchParam()
      this.searchParam.status = e.target.attr.status
      this.search()
    },
    search (append, callback) {
      // if(this.loading) {
      //   return new Deferred().resolve()
      // }
      this.loading = true
      return api.userCommissionOrder.search(this.searchParam).done((rs) => {
        rs.data.results.map(data => {
          try {
            data.estimateRewardFee = data.estimateRewardFee.toFixed(2)
            data.settleFee = data.settleFee != null ? data.settleFee.toFixed(2) : '0.00'
            data.settledRewardFee = data.settledRewardFee != null ? data.settledRewardFee.toFixed(2) : '0.00'
          } catch (e){
            // modal.alert({message: JSON.stringify(e.toLocaleString())})
          }
        })
        if (append) {
          this.userCommissionOrderList = this.userCommissionOrderList.concat(rs.data.results)
        } else {
          this.userCommissionOrderList = rs.data.results
        }
        let paging = rs.data
        this.hasNext = paging.hasNext
      }).always(() => {
        this.loading = false
        callback && callback()
      })
    },
    onXRefresh (event) {
      this.searchParam.page = 1
      this.onRefresh(event, Deferred.when(this.loadData(), this.search()))
    },
    onLoadingMore (event) {
      this.loadingMore = true
      this.searchParam.page = this.searchParam.page + 1
      this.search(true, () => {
        this.loadingMore = false
      })
    },
    gotoTop () {
      let dom = weex.requireModule('dom')
      dom.scrollToElement(this.$refs.userCommissionOrderList)
    },
    onPageScroll (event) {
      this.onPageScrollForScrollTop(event)
    },
    itemClick (item) {
      // navigator.push('commission-item.js?id=' + item.id)
    }
  }
}
</script>
